<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <div class="left-menu">
      <img src="../assets/image/logo.png" alt="Logo" style="height: 40px;"/>
      <span>在线OJ</span>
    </div>
    <div class="flex-grow"/>
    <el-menu-item index="1" @click="goToWebCode">我的代码</el-menu-item>
    <el-menu-item index="2" @click="goToProblem">我的题库</el-menu-item>
    <!--    <el-menu-item index="3" @click="goToRecords">我的竞赛</el-menu-item>-->
    <el-menu-item v-if="role === '3'" index="4" @click="goToManager">题库管理</el-menu-item>
    <el-menu-item v-if="role === '3'" index="5" @click="goToBackManager">判题机管理</el-menu-item>
    <el-menu-item index="6" @click="goToHome">返回主页</el-menu-item>
    <div class="flex-grow"/>
  </el-menu>
  <div class="background">
    <div class="main">
      <RouterView/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router';
const role:String = window.localStorage.getItem('role')

const router = useRouter();

const goToWebCode = () => {
  router.push('/student/oj/WebCode');
};

const goToProblem = () => {
  router.push('/student/oj/Problem');
};

const goToRecords = () => {
  router.push('/student/oj/Contest');
};
const goToManager = () => {
  router.push('/student/oj/Manager')
}
const goToHome = () => {
  router.push('/home')
}
const goToBackManager = () => {
  window.open('http://pllysun.top:6005/', '_blank')
}
</script>


<style scoped>
.el-menu-demo {
  width: 100%; /* 菜单宽度为100% */
  background-color: #FFFFFF; /* 背景颜色，根据需要设置 */
  height: 6vh;
}

.left-menu {
  display: flex; /* 使用flex布局来更好地控制间隔和对齐 */
  align-items: center; /* 垂直居中对齐图标和文本 */
}

.left-menu img {
  margin-right: 10px; /* 设置图标和文本之间的间隔 */
}

.left-menu span {
  font-family: 'Arial', sans-serif; /* 修改字体，这里使用Arial，你可以换成其他喜欢的字体 */
  font-size: 16px; /* 设置字体大小，根据需要调整 */
  color: #333; /* 设置字体颜色，这里使用深灰色，你可以根据设计需求更改 */
}


.background {
  background-color: #f5f5f5; /* 设置浅灰色背景 */
  width: 100%;
  min-height: 94vh;
}

.main {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 100%;
  margin: 0 auto;
}

.flex-grow {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  padding-left: 20%;
}

.el-menu-demo {
  display: flex;
  align-items: center;
}

.left-menu {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-left: 20px;
}


</style>